<template>
  <div class="eventManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>事件管理</span>
      </header>
    </div>
    <div class="card_table">
      <!-- 表格头部控件 -->
      <header>
        <!-- 左侧查询控件 -->
        <span>
          <el-input
            size="small"
            clearable
            v-model="table_config.eventId"
            class="sel_inp"
            placeholder="请输入内容"
          >
            <template slot="prepend">事件名称</template>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-input
            size="small"
            clearable
            v-model="table_config.eventName"
            class="sel_inp"
            placeholder="请输入内容"
          >
            <template slot="prepend">显示名称</template>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-select
            @change="search"
            v-model="table_config.productCode"
            class="sel_head"
            size="small"
            filterable
            clearable
            placeholder="SDK厂商筛选"
          >
            <el-option
              v-for="item in productCode_arr"
              :key="item.code"
              :label="item.value"
              :value="item.code"
            ></el-option>
          </el-select>
        </span>

        <!-- 右侧追加控件 -->
        <span>
          <el-button @click="show_form('添加事件', false, {})" type="primary" plain size="mini">添加事件</el-button>
        </span>
      </header>
      <!-- 表体区域 -->
      <section>
        <el-table
          v-loading="table_loading"
          :size="table_size"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="eventId" label="事件名称" sortable width="180"></el-table-column>
          <el-table-column prop="eventName" label="事件显示名称" sortable width="180"></el-table-column>
          <el-table-column prop="productCode" label="SDK产品编码" sortable width="180">
            <template slot-scope="scope">
              {{sdkShow(scope.row.productCode)}}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="说明"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                plain
                @click="show_form('编辑事件', true, scope.row)"
                size="mini"
                type="text"
              >编辑</el-button>
              <el-button
                v-if="scope.row.status == 1"
                @click="event_disable(scope.row)"
                plain
                size="mini"
                type="text"
              >禁用</el-button>
              <!-- <el-button v-if="scope.row.status==2" plain size="mini" type="text">启用</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页控件 -->
      <footer>
        <el-pagination
          :current-page="table_config.currentPage"
          @size-change="handleSizeChange"
          @current-change="current_change"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="table_config.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_page"
        ></el-pagination>
      </footer>
    </div>
    <!-- 抽屉区域 -->
    <el-drawer title :modal="false" :visible.sync="drawer_bool" :with-header="false">
      <div class="drawer_box">
        <header>
          <span class="til">{{ drawer_til }}</span>
          <i @click="drawer_bool = false" class="el-icon-close"></i>
        </header>
        <section>
          <div class="section_til">事件名</div>
          <div class="el_com">
            <el-input
              clearable
              :disabled="drawer_obj.id"
              :size="table_size"
              class="el_inp"
              v-model="drawer_obj.eventId"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="section_til">显示名</div>
          <div class="el_com">
            <el-input
              clearable
              v-model="drawer_obj.eventName"
              :size="table_size"
              class="el_inp"
              placeholder="请输入内容"
            ></el-input>
          </div>

          <div class="section_til">事件类型</div>
          <div class="el_com">
            <el-select
              :size="table_size"
              v-model="drawer_obj.commonType"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in [{
                  value:'预置事件',
                  code:1
                },{
                  value:'自定义事件',
                  code:2
                }]"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>

          <div class="section_til">适用范围</div>
          <div class="el_com">
            <el-select
              @change="scopeApplication"
              :size="table_size"
              v-model="appListBool"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in [{
                  value:'特定应用',
                  code:'1'
                },{
                  value:'全部应用',
                  code:'2'
                }]"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>

          <div class="section_til" v-if="appListBool=='1'">选择应用</div>
          <div class="el_com" v-if="appListBool=='1'">
            <el-select
              clearable
              :size="table_size"
              v-model="drawer_obj.appId"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in appList"
                :key="item.appId"
                :label="item.appName"
                :value="item.appId"
              ></el-option>
            </el-select>
          </div>

          <div class="section_til">动作类型</div>
          <div class="el_com">
            <el-select
              clearable
              :size="table_size"
              v-model="drawer_obj.actionType"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in preset_properties_type"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>

          <div class="section_til">动作效果</div>
          <div class="el_com">
            <el-select
              clearable
              :size="table_size"
              v-model="drawer_obj.actionEffect"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in preset_properties_effect"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>

          <div class="section_til">SDK产品编码</div>
          <div class="el_com">
            <el-select
              v-model="drawer_obj.productCode"
              :size="table_size"
              class="el_inp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in productCode_arr"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
          <div class="section_til">说明</div>
          <div class="el_com">
            <el-input
              clearable
              v-model="drawer_obj.remark"
              class="el_inp lang"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </section>
        <footer>
          <el-button
            :disabled="table_loading"
            v-if="drawer_obj.id"
            class="btn"
            @click="event_update"
            size="mini"
            type="primary"
          >保存</el-button>
          <el-button
            :disabled="table_loading"
            v-if="!drawer_obj.id"
            class="btn"
            @click="event_add"
            size="mini"
            type="primary"
          >新增</el-button>
          <el-button class="btn" @click="drawer_bool = false" size="mini" type="primary" plain>取消</el-button>
        </footer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import application from "@/utils/api/application.js";
export default {
  name: "eventManage",
  components: {},
  data() {
    return {
      appListBool: "1",
      appList: [], // 应用列表
      tableData: [],
      table_loading: false,
      table_size: "small",
      drawer_bool: false, // 抽屉开关变量
      drawer_til: null,
      total_page: 0, // 表格数据总量
      preset_properties_type: [], // 动作类型数组
      preset_properties_effect: [], // 动作效果数组

      productCode_arr: [
        {
          value: "网舟",
          code: "wz"
        },
        {
          value: "极光",
          code: "jg"
        },
        {
          value: "电信",
          code: "dx"
        }
      ], // SDK产品编码数组
      table_config: {
        currentPage: 1,
        pageSize: 10,
        eventId: null,
        eventName:null, // 事件显示名称
        productCode: null
      }, // 表格查询配置对象
      drawer_obj: {
        id: null,
        actionType: null, // 动作类型
        actionEffect: null, // 动作效果
        eventId: null, // 事件名称
        eventName: null, // 显示名称‘
        commonType: null, // 事件类型
        // extMessage: null, // 预置属性
        productCode: null, // 厂商
        remark: null // 说明
      } // 抽屉弹窗存储大对象
    };
  },
  methods: {
    sdkShow(code){
      let value = ''
      this.productCode_arr.map((_i)=>{
        if(code==_i.code){
          value = _i.value
        }
      })
      return value
    },
    // 适用范围更改
    scopeApplication(v) {
      if (v == "1") {
        this.drawer_obj.appId = this.appList[0] ? this.appList[0].appId : null;
      } else {
        this.drawer_obj.appId = "0";
      }
    },
    handleSizeChange(page) {
      this.table_config.pageSize = page;
      this.table_config.currentPage = 1;
      this.query();
    },
    // 页码切换函数
    current_change(page) {
      this.table_config.currentPage = page;
      this.query();
    },
    show_form(key, bool, obj) {
      this.drawer_til = key;
      if (bool) {
        if (obj.appId !== "0") {
          this.appListBool = "1";
        } else {
          this.appListBool = "2";
        }
        this.drawer_obj = {
          id: obj.id,
          appId: obj.appId,
          commonType: obj.commonType, // 事件类型
          eventId: obj.eventId, // 事件名称
          actionType: obj.actionType, // 动作类型
          actionEffect: obj.actionEffect, // 动作效果
          eventName: obj.eventName, // 显示名称
          // extMessage: obj.extMessage, // 预置属性
          productCode: obj.productCode, // 厂商
          remark: obj.remark // 说明
        };
      } else {
        this.appListBool = "2";
        this.drawer_obj = {
          id: null,
          appId: "0",
          eventId: null, // 事件名称
          actionType: null, // 动作类型
          actionEffect: null, // 动作效果
          eventName: null, // 显示名称
          commonType: 1, // 事件类型
          // extMessage: null, // 预置属性
          productCode: "wz", // 厂商
          remark: null // 说明
        }; // 抽屉弹窗存储大对象
      }
      this.drawer_bool = true;
    },
    // 查询点击函数
    search() {
      this.table_config.currentPage = 1;
      this.query();
    },
    // 数据请求函数
    async query() {
      this.table_loading = true;
      let res = await application.event_list(this.table_config);
      this.table_loading = false;
      if (res.success) {
        this.total_page = res.value.total;
        this.table_config.currentPage = res.value.currentPage;
        this.table_config.pageSize = res.value.pageSize;
        this.tableData = res.value.list;
      }else{
        this.$message.error(res.errorMessage);
      }
    },
    // 事件编辑
    async event_update() {
      this.table_loading = true;
      let res = await application.event_update(this.drawer_obj);
      this.table_loading = false;
      if (res.success) {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.query();
      } else {
        this.$message.error(res.errorMessage);
      }
      this.drawer_bool = false;
    },
    // 事件新增
    async event_add() {
      this.table_loading = true;
      let res = await application.event_add(this.drawer_obj);
      this.table_loading = false;
      if (res.success) {
        this.table_config.currentPage = 1;
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.query();
      } else {
        this.$message.error(res.errorMessage);
      }
      this.drawer_bool = false;
    },
    // 事件禁用函数
    async event_disable(obj) {
      this.table_loading = true;
      let res = await application.event_disable({
        id: obj.id
      });
      let len = this.tableData.length;
      if (res.success) {
        this.$message({
          message: "禁用成功",
          type: "success"
        });
        if (len == 1 && this.table_config.currentPage > 1) {
          this.table_config.currentPage--;
        }
        this.query();
      } else {
        this.table_loading = false;
        this.$message.error(res.errorMessage);
      }
    },
    // 获取预置属性数组 (动作类型 动作效果)
    async event_prefabricated() {
      // 动作类型
      let res = await application.event_prefabricated({
        type: "actionType"
      });
      if (res.success) {
        this.preset_properties_type = res.value.list;
      } else {
        this.$message.error(res.errorMessage);
      }
      // 动作效果
      let _res = await application.event_prefabricated({
        type: "actionEffect"
      });
      if (_res.success) {
        this.preset_properties_effect = _res.value.list;
      } else {
        this.$message.error(_res.errorMessage);
      }
    },
    // 获取应用列表
    async getAppList() {
      let res = await application.app_list({
        currentPage: 1,
        pageSize: 10000
      });
      if (res.success) {
        this.appList = res.value.list;
      }
    }
  },
  created() {
    this.query();
    this.event_prefabricated();
    this.getAppList();
  },
  computed: {}
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
// 抽屉壳子元素
.drawer_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 20px 0 10px;
    border-bottom: 1px solid #e4e7ed;
    .til {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: rgba($color: #303133, $alpha: 1);
    }
    i {
      font-size: 16px;
      font-weight: 600;
      transition: all 0.5s ease;
    }
    i:hover {
      transform: rotate(90deg);
      font-size: 20px;
      font-weight: 800 !important;
    }
  }
  section::-webkit-scrollbar {
    display: none;
  }
  section {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 66px;
    padding: 0 0 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    .section_til {
      width: 100%;
      text-indent: 20px;
      height: 30px;
      line-height: 30px;
      text-align: left;
      color: #909399;
      font-size: 12px;
    }
    .el_com {
      width: 100%;
      padding: 0 0 0 30px;
      padding: 6px 0 6px 30px;
      // height: 60px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el_inp {
        width: 80%;
        // transform: scale(1, 0.9);
      }
      .lang {
        width: 90%;
        // min-width: 400px;
      }
    }
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
    border-top: 1px solid #e4e7ed;
    .btn {
      margin: 0 20px;
    }
  }
}
.eventManage::-webkit-scrollbar {
  display: none;
}
.eventManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 10px auto 10px;
    padding-bottom: 50px;
    position: relative;
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 290px;
        margin-right: 6px;
        margin-left: 0;
      }
      .sel_inp {
        width: 380px;
        margin-right: 14px;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
